<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='WebUI/controls/fullcalendar-2.7.3/lib/cupertino/jquery-ui.min.css' />
    <link href='WebUI/controls/fullcalendar-2.7.3/fullcalendar.css' rel='stylesheet' />
    <link href='WebUI/controls/fullcalendar-2.7.3/fullcalendar.print.css' rel='stylesheet' media='print' />
    <link href="../plugins/layer/skin/layer.css" rel="stylesheet" />

    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/jquery.query.js"></script>
    <script src="../plugins/layer/layer.js"></script>
    <script src="WebUI/js/animate.js"></script>
    <script src="../js/basicjs.js"></script>
    <script src='WebUI/controls/fullcalendar-2.7.3/lib/moment.min.js'></script>
    <script src='WebUI/controls/fullcalendar-2.7.3/lib/jquery.min.js'></script>
    <script src='WebUI/controls/fullcalendar-2.7.3/fullcalendar.min.js'></script>
    <script src='WebUI/controls/fullcalendar-2.7.3/lang-all.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #top {
            background: #eee;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            line-height: 40px;
            font-size: 12px;
        }

        #calendar {
            max-width: 900px;
            margin: 10px auto;
        }
        .fc th{ line-height: 30px;}
        .fc-event {
            border: 1px solid #ff9933; /* default BORDER color */
            background-color: #fff;line-height: 22px; text-indent: 5px; /* default BACKGROUND color */
        }
        .fc-event, .fc-event:hover, .ui-widget .fc-event{ color: #ff9933}
        .fc-event.no{ border: 1px solid #bdbdbd; /* default BORDER color */
            background-color: #fff;}
        .fc-event.no, .fc-event.no:hover, .ui-widget.no .fc-event.no{ color: #bdbdbd}

        .fc-event.yes{ border: 1px solid #ff9933; /* default BORDER color */
            background-color: #fac676;}
        .fc-event.yes, .fc-event.yes:hover, .ui-widget.yes .fc-event.yes{ color:#ff9933}

        .fc-title{ font-size:14px;line-height: 30px; font-weight: normal;}
        .fc-toolbar h2{ font-size:20px;}
        .fc-time{display: none}
    </style>

    <script>
        $(document).ready(function() {
            var currentLangCode = 'zh-cn';
            // build the language selector's options
            $.each($.fullCalendar.langs, function(langCode) {
                $('#lang-selector').append(
                        $('<option/>')
                                .attr('value', langCode)
                                .prop('selected', langCode == currentLangCode)
                                .text(langCode)
                );
            });

            // rerender the calendar when the selected option changes
            $('#lang-selector').on('change', function() {
                if (this.value) {
                    currentLangCode = this.value;
                    $('#calendar').fullCalendar('destroy');
                    renderCalendar();
                }
            });

            var e=TIMEConverter(new Date().getTime());
            var fieldId=parent.fieldId;
            var renderCalendar=$('#calendar').fullCalendar({

                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    defaultDate: e,
                    lang: currentLangCode,
                    buttonIcons: false, // show the prev/next text
                    weekNumbers: true,
                    editable: false,
                    eventLimit: true, // allow "more" link when too many events
                    events:function(start, end, timezone, callback) {
                        $.ajax({
                            url:ROOTBASE+'fieldlease/front/fieldLease/event/'+fieldId,
                            type:'GET',
                            async:false,
                            success:function(data) {
                                var info = data.calendarVoList;
                                var events = [];
                                for (var i = 0; i < info.length; i++) {
                                    var ev = info[i];
                                    var id=ev.id;
                                    var title = ev.title;
                                    var evtstart = ev.stime;
                                    var evtend = ev.etime;
                                    var obj;

                                    if(id==parent.eventId){
                                         obj =  {
                                             title:title,
                                             start:evtstart,
                                             end:evtend,
                                             id:id,
                                             className:'yes'
                                         }
                                    }else if(ev.status==1){
                                        obj =  {
                                            title:title,
                                            start:evtstart,
                                            end:evtend,
                                            id:id,
                                            className:'no'
                                        }
                                    }else {
                                        obj ={
                                            title:title,
                                            start:evtstart,
                                            end:evtend,
                                            id:id
                                        }
                                    }
                                    events.push(obj);
                                }
                                callback(events);
                            },

                            error:function() {
                                window.parent.location.href ='../login.html';
                            }
                        })
                    },
                    eventClick:function (calEvent, jsEvent, view) {
                        console.info(calEvent);
                        console.info(jsEvent);
                        console.info(view);
                        var no =calEvent.className;
                        if(no[0]!="no"){
                            $(".fc-event").each(function () {
                                $(this).removeClass('yes');
                            })
                            $(this).addClass('yes');
                            parent.fieldlease(calEvent.id);
                        }

                    },

                });


            renderCalendar;


        });

    </script>
</head>
<body>
<!--说明:
         三个状态调用样式:
            (1)可以选择:给 .fc-event添加.yes 的class样式
            (2)已选择:给 不添加样式
            (3)不可选择:给 .fc-event添加.no 的class样式
                        -->
<div id='calendar'></div>

</body>
</html>
